<template>
    <div class="app">
        <myNavbar title="退款/退货"></myNavbar>
        <list>
            <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
                     :display="refreshing ? 'show' : 'hide'">
                <text class="indicator-text">{{refreshTitle}}</text>
            </refresh>
            <cell>
                <div v-for="item in orderList" >
                    <order :orderData="item"></order>
                </div>
            </cell>
            <cell>
                <noData v-if="orderList.length == 0" noDataText="暂无订单"></noData>
            </cell>
           <loading class="loading" @loading="onloading"
                    :display="loadinging ? 'show' : 'hide'">
               <text class="indicator-text" style="padding-bottom: 20px;">加载中...</text>
           </loading>
        </list>
    </div>
</template>

<script>
    import {
        list
    } from '../../../api/askfor';
    import order from '../../../components/order/refund.vue';
    import noData from '../../../components/noData/noData.vue';
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    export default {
        data() {
            return {
                pageNum: 0,
                pageSize: 10,
                orderList: [],
                refreshing: false,
                loadinging: false,
                loading: true,
				refreshTitle:'释放刷新页面...'
            };
        },
        created(){

        },
        mounted(){
            this.loadList()
        },
        components: {
            order, noData,myNavbar
        },
        methods:{
            loadList() {
                var _this = this;
                eeui.loading();
                list({
                    pageNum: _this.pageNum,
                    pageSize: _this.pageSize,
                    mchId: _this.getGlobalData().mchId
                }).then(
                    res => {
                        if (res.type == 'success') {
                            res.data.data.forEach(function (item) {
                                item.itemList.forEach(function (il) {
                                    il.thumbnail = _this.thumbnail(il.thumbnail, 170, 170)
                                    if(il.subPoint == null){
                                      il.subPoint = '0'
                                    }
                                })
                                _this.orderList.push(item)
                            })
                            _this.loading = _this.pageSize <= res.data.data.length;
                            eeui.loadingClose();
                        } else {
                            eeui.loadingClose();
                        }
                    }
                ).catch(error => {
                    eeui.loadingClose();
                    console.log(error)
                })
            },
            onrefresh(event) {
                var _this = this
                this.refreshing = true
				this.refreshTitle = '加载中...'
                setTimeout(() => {
                    _this.pageNum = 1;
                    _this.orderList = []
                    _this.loadList()
                    _this.refreshing = false
                }, 2000)
            },
            onpullingdown(event) {
				this.refreshTitle = '释放刷新页面...'
            },
            onloading(event) {
                var _this = this
                this.loadinging = true
                setTimeout(() => {
                    if (_this.loading == true) {
                        _this.pageNum = this.pageNum + 1;
                        _this.loadList()
                    }
                    _this.loadinging = false
                }, 2000)
            },
        }
    }
</script>

<style scoped>
    .app,body{
        background-color:rgba(248,248,248,0.8);
    }
    .app{
        flex: 1;
    }
    .refresh {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .indicator-text {
        color: #888888;
        font-size: 22px;
        text-align: center;
    	padding-top: 20px;
    }

    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }
    .navbar {
        width: 750px;
        height: 100px;
    }
    .text {
        font-size: 26px;
    }
</style>
